<template>
  <view>
    <view class="header">
      <uni-data-select
        v-model="expiration"
        :localdata="dropdownListOption"
        @change="changeExpiration"
        placement="top"
        placeholder="全部"
      ></uni-data-select>
    </view>
    <view class="body">
      <view class="taocan_item" v-for="(item, index) in taocan_list" :key="index">
        <text style="font-size: small; color: #000000">套餐名： {{ item.grade }}</text>
        <text style="font-size: small; color: #000000"
          >购买时间：{{ shortTime(item.add_time) }}</text
        >
        <text style="font-size: small; color: #000000"
          >过期时间：{{ shortTime(item.expiration) }}</text
        >
      </view>
      <view class="buy_taocan" @click="onClickBuyTaocan">
        <text>我要购买套餐</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getTaocanDetailAPI } from '@/services/home'
// import { type OptionTypeItem } from '@/types/home'
// 选择框列表
const dropdownListOption = ref<OptionTypeItem[]>([
  { text: '全部', value: 'all', disable: false },
  { text: '未过期', value: 'within', disable: false },
  { text: '已过期', value: 'out', disable: false },
])
// 下拉选择项
type OptionTypeItem = {
  text: string
  value: string
  disable: boolean
}
type TaocanOfUserItem = {
  grade: string
  add_time: string
  expiration: string
}
const taocan_list = ref<TaocanOfUserItem[]>([])
const expiration = ref<string>('all')
// 修改时间格式，取前面的年月
const shortTime = (time: string) => {
  return time.slice(0, 7)
}
const changeExpiration = async (value: string) => {
  expiration.value = value
}
// 获取所有该用户的购买的套餐
const getTaocanData = async () => {
  let params_data = { expiration: expiration.value }
  const res = await getTaocanDetailAPI(params_data)
  console.log('所有套餐', res)
  if (res.code == 200) {
    taocan_list.value = res.data.results
  } else {
    uni.showToast({ icon: 'error', title: '获取套餐失败！' })
  }
}
// 页面加载
onLoad((option: any) => {
  console.log('父组件页面加载', option)
  getTaocanData()
})
const onClickBuyTaocan = () => {
  uni.switchTab({
    url: `/pages/goods/buy`,
  })
}
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
  background-color: #dadadce7;
}
.body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.taocan_item {
  background-color: rgb(244, 239, 239);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 5rpx;
  border: 3rpx solid #e2e8f0;
  border-radius: 20rpx;
  width: 80%;
  height: 150rpx;
}
.buy_taocan {
  background-color: rgb(244, 239, 239);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5rpx;
  border: 3rpx solid #e2e8f0;
  border-radius: 20rpx;
  width: 80%;
  height: 80rpx;
}
</style>
